
<!--TODO: 商品展示页面 (发弹窗？)-->
<template>
    <div class="app-container">
        <div style="margin-top: 1px">
            <el-row>
                <el-col span = '18'>
                    <el-form :model="listQuery" inline size="small" label-width="80px" >
                        <el-form-item label="关键词:">
                            <el-input style="width: 150px;" v-model="listQuery.keyword" placeholder="输入关键词"></el-input>
                        </el-form-item>
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleSearch"
                        >
                            搜索
                        </el-button>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <div>
            <div class="table-container">
                <el-table ref="goodsTable"
                          :data="goodsList"
                          style="width: 100%"
                          @selection-change=""
                          v-loading="listLoading"
                >
                    <el-table-column label="需求id"  align="center" min-width="5%">
                        <template slot-scope="scope">
                            <p>{{scope.row.goodId}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" align="center" min-width="15%">
                        <template slot-scope="scope">
                            {{scope.row.goodName}}
                        </template>
                    </el-table-column>
                    <el-table-column label="类型"  align="center" min-width="10%">
                        <template slot-scope="scope">
                            {{scope.row.typeId}}
                        </template>
                    </el-table-column>
                    <el-table-column label="价格" align="center" min-width="10%">
                        <template slot-scope="scope">
                            {{scope.row.price}}
                        </template>
                    </el-table-column>
                    <el-table-column label="描述" align="center" min-width="30%">
                        <template slot-scope="scope">
                            {{scope.row.description}}
                        </template>
                    </el-table-column>

                    <el-table-column label="操作"  align="center" min-width="20%">
                        <template slot-scope="scope">

                            <el-tooltip :enterable = false class="item" effect="light" content="请求交易" placement="top">
                                <el-button type="success"
                                           style="width: 60% ;align-content: center;align-self: center"
                                           @click="ShowOwnerInfo(scope.row.studentId)"
                                >
                                    请求交易
                                </el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
            <el-row justify="center" type="flex">
                <!-- 分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script>
import {
    getAllGoods,
    getAllModuleByGroup,
    getAllRequest,
    getGoodList,
    getStudentByStudentId,
    getTestResult,
    getTestResultOfHtml
} from "../../api/student";
import {} from "../../api/student";

const defaultListQuery = {
    keyword: null,
    id: -1,
    pageNum: 1,
    pageSize: 10,
};

const defaultQueryInfo = {
    keyword: null,
    pageNum: 1,
    pageSize: 20
}

const defaultEditInfo = {
    id: null,
    isVisible: false,
    operateType: 'update', // or create
}
export default {
    name: "GroupResult",
    data() {
        return {
            tableData: [],
            queryInfo: defaultQueryInfo,
            total: 0,

            queryModel: {keyword: null},
            listQuery: Object.assign({}, defaultListQuery),

            username: localStorage.getItem('username'),
            goodsList: [],
            listLoading: null

        }
    },
    created() {
        this.getList();
    },
    methods: {
        getList()
        {
            this.listLoading = 1;
            getAllGoods().then(res => {
                this.listLoading = false;
                this.goodsList = res.data.list;
                this.total = res.data.list.length;
            })
        },
        // handleSearch() {
        //     this.listQuery.pageNum = 1;
        //     this.getList();
        //     this.$message({
        //         message: "查询成功",
        //         type: "success",
        //         duration: 1000,
        //     });
        // },

        handleSizeChange(newSize) {
            this.queryInfo.pageSize = newSize;
            this.getList();
        },
        handleCurrentChange(newPage) {
            this.queryInfo.pageNum = newPage;
            this.getList();
        },

        ShowOwnerInfo(id){
            getStudentByStudentId(id).then( res =>
                {
                    this.$alert(
                        <div align="center">
                            <p >发布者的QQ为{res.data.list[0].qq}</p>
                            <p>发布者的电话为{res.data.list[0].tel}</p>
                            <p>请尽快与发布者联系！</p>
                        </div>
                    );
                }
            )

        }

    }
}

</script>

<style>
.demo-table-expand {
    font-size: 16px;
}
.demo-table-expand .el-form-item__label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
